<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>周日计划模块</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="demoTable">
    <input type="hidden" id="one"/>
    <input type="hidden" id="two"/>
    <input type="hidden" id="three"/>
    <input type="hidden" id="four"/>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script>
    var table2 = "";
    layui.use('table', function () {

        //获取table数据保存在变量中
        var table = layui.table;
        var form = layui.form;
        dateRender();
        //数据交互
        table2 = table.render({
            elem: '#test',
            url: '../../../atsPlanWeekController/selectAll',
            toolbar: '#headBtn',//开启头部工具栏，并为其绑定左侧模板
            title: '周日计划数据表',
          /*  done: function (res, curr, count) {
                $("table").css("width", "100%");
            },*/
            cols: [[
                {type:'checkbox',title:'全选', fixed: 'left'},
                //是否禁用拖拽列宽（默认false）unresize:true,是否禁用排序sort:true
                {type: 'numbers', title: '排序'},//序列号 numbers
                {field: 'weekName', title: '计划名称', width: 120, toolbar: '#All'},
                {field: 'itemName', title: '运动项目名称', width: 120},
                {field: 'coachName', title: '教练员姓名', width: 120},
                {field: 'otherCoach', title: '其他教练员', width: 120},
                {field: 'planDate', title: '制定时间', width: 120},
                {field: 'phaseName', title: '阶段计划名称', width: 120},
                {field: 'weekMission', title: '周训练任务', width: 120},
                {field: 'weekEmphasis', title: '周训练重点', width: 120},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]],
            page: true
        });
        //监听头部工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'delAll':
                    layer.confirm('您真的要删除吗', function(index) {
                        var data = checkStatus.data;
                        var id = "";
                        $.each(data, function(index, item) {
                            id += item.weekId + ",";
                        });

                        if(id.length==0){
                            layer.msg("请选择需要操作的行");
                            return;
                        }
                        var url ="../../../atsPlanWeekController/delAll";
                        var datas = {
                            id : id
                        };
                        $.post(url, datas, function(obj) {
                            layer.msg(obj.msg);
                            window.location.reload();
                            dateRender();
                        }, "json");
                    });
                    break;
                case 'seachTable'://搜索
                    $("#one").val($("#trainer").val());
                    $("#two").val($("#weekName").val());
                    $("#three").val($("#startTime").val());
                    $("#four").val($("#endTime").val());
                    //执行重载
                    table2.reload({
                        url: '../../../atsPlanWeekController/selectAll',
                        where: {
                            trainer: $("#trainer").val(),
                            weekName:$("#weekName").val(),
                            startTime:
                                $("#startTime").val(),
                            endTime:
                                $("#endTime").val()
                        },
                        //第一页开始
                        page: {
                            curr: 1
                        }
                    });
                    $("#trainer").val($("#one").val());
                    $("#weekName").val($("#two").val());
                    $("#startTime").val($("#three").val());
                    $("#endTime").val($("#four").val());
                    dateRender();
                    break;
                case 'add'://新增
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '新增页面',//标题
                        shadeClose: true,
                        shade: 0.8,//背景阴影
                        area: ['60%', '100%'],
                        content: 'AtsPlanWeekAddorupdate.html?pid=1', //iframew的url
                        end: function () {
                            dateRender()
                        }
                    });
                    break;
            }
            ;
        });
        //监听操作
        table.on('tool(test)', function (objs) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = objs.data; //获得当前行数据
                var layEvent = objs.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = objs.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        var url = "../../../atsPlanWeekController/updateIsva";
                        var datas = {weekId: objs.data.weekId, isva: objs.data.isva}
                        $.post(url, datas, function (obj) {
                            if (obj.num == 1) {
                                layer.msg(obj.msg);
                                table2.reload();
                                dateRender()
                            } else {
                                layer.msg(obj.msg);
                            }
                        }, "json")
                    });
                }
                if (layEvent === 'details') {
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '查看详情',//标题
                        shadeClose: true,
                        shade: 0.3,//背景阴影
                        area:['60%', '90%'],//大小
                        content: 'AtsPlanWeekDetails.html?weekId=' + data.weekId, //iframew的url
                        end: function () {

                            table2.reload();//刷新父页面;
                            dateRender()
                        }
                    });
                }
                if (layEvent === 'edit') {
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '修改页面',//标题
                        shadeClose: true,
                        shade: 0.3,//背景阴影
                        area: ['60%', '100%'],//大小
                        content: 'AtsPlanWeekAddorupdate.html?id=' + data.weekId, //iframew的url
                    });
                }
            }
        );
        function dateRender(){
            layui.use(['laydate'], function () {
                laydate = layui.laydate;
                //日期
                laydate.render({
                    elem: '#startTime',
                    trigger: 'click',
                    type: 'date'
                });

                laydate.render({
                    elem: '#endTime',
                    trigger: 'click',
                    type: 'date'
                });
            });
        }
    });
</script>

</body>
<style>
    .details {
        color:#00aced;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    .layui-inline {
        width: 12%;
    }
</style>
<script type="text/html" id="All">
    <div lay-event="details" class="details">{{d.weekName}}</div>
</script>


<script type="text/html" id="headBtn">
    教练员姓名:
    <div class="layui-inline">
        <input class="layui-input" name="trainer" id="trainer" placeholder="请输入关键字" autocomplete="off">

    </div>
    计划名称:
    <div class="layui-inline">
        <input class="layui-input" name="weekName" id="weekName" placeholder="请输入关键字" autocomplete="off">
    </div>
    时间:
    <div class="layui-inline">
        <input class="layui-input" name="startTime" id="startTime" placeholder="开始时间" lay-verify="date"
               autocomplete="off">
    </div>
    -
    <div class="layui-inline">
        <input class="layui-input" name="endTime" id="endTime" placeholder="结束时间" lay-verify="date" autocomplete="off">
    </div>


    <input type="button" lay-event="seachTable" class="layui-btn layui-btn-normal layui-btn-sm" value="搜索"/>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add" id="add">增加</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll">批量删除</button>

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑 </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>